<template>
  <div>
    <el-dialog
      :title="type === 1 ? '新增类别' : '编辑类别'"
      :visible="showDialog"
      width="400px"
      @close="btnCancel"
    >
      <el-form
        ref="cateContent"
        :model="formList"
        :rules="rules"
        label-width="100px"
        label-position="left"
        style="padding-top:10px"
      >
        <el-form-item label="行业名称" prop="categoryname">
          <el-input v-model="formList.categoryname" style="width:200px"/>
        </el-form-item>
        <el-form-item label="排序" prop="number">
          <el-input v-model.number="formList.number" style="width:100px"/>
        </el-form-item>
        <el-form
          ref="sonContent"
          label-width="100px"
          label-position="left"
          :model="formList.son[0]"
          :rules="sonRules"
          v-show="type===1"
        >
          <el-form-item label="子类别名称" prop="categoryname">
            <el-input v-model="formList.son[0].categoryname" style="width:100px"/>
          </el-form-item>
          <el-form-item label="子类别排序" prop="number">
            <el-input v-model.number="formList.son[0].number" style="width:100px"/>
          </el-form-item>
        </el-form>
      </el-form>
      <el-row slot="footer" type="flex">
        <el-col>
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOK">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { addCategory, editCategory } from '@/api/trade'
export default {
  components: {},
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      formList: {
        categoryname: '',
        number: '',
        son: [
          {
            categoryname: '',
            number: ''
          }
        ]
      },
      rules: {
        categoryname: [
          {
            required: true,
            message: '请输入行业名称',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '请输入行业排序',
            trigger: 'blur'
          },
          { type: 'number', message: '排序必须为数字值', trigger: 'blur' }
        ],
        snumber: [
          {
            trigger: 'blur'
          }
        ]
      },
      sonRules: {
        categoryname: [
          {
            required: true,
            message: '请输入行业名称',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '请输入行业排序',
            trigger: 'blur'
          },
          { type: 'number', message: '排序必须为数字值', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // eventbus传参
    this.$EventBus.$on('sendMsg', res => (this.formList = res))
  },
  methods: {
    btnCancel() {
      this.formList = {
        categoryname: '',
        number: '',
        son: [
          {
            categoryname: '',
            number: ''
          }
        ]
      }
      this.$refs.cateContent.resetFields()
      this.$refs.sonContent.resetFields()
      this.$emit('update:showDialog', false)
    },
    async btnOK() {
      if (this.formList.id) {
        // 编辑
        await editCategory(this.formList)
        this.$message.success('编辑成功')
      } else {
        // 新增 执行成功还会进入catch?
        await this.$refs.cateContent.validate()
        await this.$refs.sonContent.validate()
        try {
          await addCategory(this.formList)
        } catch (error) {
          console.log(error)
        }
      }
      this.$parent.getCategory()
      // console.log(this.$parent)
      this.$emit('update:showDialog', false)
    }
  }
}
</script>
<style scoped></style>
